<template>
  <div class="wrapper">
    <BaseHeader></BaseHeader>
    <div class="wrapper-head">
      <div class="head-left">
        <div class="left-tips">订单提交成功，请尽快付款！</div>
        <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
      </div>
      <div class="head-right">
        <div>
          应付金额
          <span class="price">{{ $route.query.price | unitPrice }}</span
          >元
        </div>
      </div>
    </div>
    <div class="content">
      <div class="pay-way">
        {{ params.paymentMethod === "ALIPAY" ? "支付宝支付" : "微信支付" }}
      </div>
      <div class="qrcode">
        <div style="width: 200px; height: 200px; border: 1px solid #eee">
          <vue-qr
            :text="qrcode"
            :margin="0"
            colorDark="#000"
            colorLight="#fff"
            :size="200"
          ></vue-qr>
        </div>
        <div class="intro">
          <Icon type="md-qr-scanner" /> 请使用{{
            params.paymentMethod === "ALIPAY" ? "支付宝" : "微信"
          }}扫码付款
        </div>
      </div>
      <div class="btn-div">
        <p class="mb_10">
          支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。
        </p>
        <div>
          <Button @click="handlePay">重新支付</Button>
          <Button type="success" @click="$router.push('/payDone')"
            >支付成功</Button
          >
        </div>
      </div>
      <a @click="$router.back()">选择其他支付方式></a>
    </div>
    <BaseFooter></BaseFooter>
  </div>
</template>
<script>
import vueQr from "vue-qr";
import { payCallback, pay } from "@/api/pay.js";
export default {
  components: { vueQr },
  data() {
    return {
      qrcode: "", // 二维码
      params: this.$route.query, // 参数
      interval: null, // 定时器
      num: 0, // 商品数
    };
  },
  methods: {
    // 获取支付二维码
    handlePay() {
      const params = this.$route.query;
      pay(params).then((res) => {
        if (res.success) {
          this.qrcode = res.result;
          this.num = 0;
          this.interval = setInterval(this.callback, 5000);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    callback() {
      // 支付回调接口
      this.num++;
      if (this.num >= 7) {
        clearInterval(this.interval);
        this.interval = null;
      }
      let params = JSON.parse(JSON.stringify(this.$route.query));
      delete params.paymentMethod;
      delete params.paymentClient;
      payCallback(params).then((res) => {
        if (res.result) {
          clearInterval(this.interval);
          this.interval = null;
          this.$router.push({
            path: "/payDone",
            query: { orderType: this.$route.query.orderType },
          });
        }
      });
    },
  },
  mounted() {
    this.handlePay();
  },
};
</script>
<style scoped lang="scss">
.head-left {
  font-weight: bold;
}
.left-tips {
  font-size: 21px;
}

.left-tips-time {
  font-size: 16px;
}
.wrapper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.75;
}
.wrapper-head,
.content {
  padding: 20px 40px;
  width: 1000px;
  margin: 20px auto;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.content {
  background-color: #fff;
  box-shadow: 0 6px 10px #ddd;
  position: relative;
  display: flex;
  .pay-way {
    font-weight: bold;
    font-size: 18px;
  }

  .qrcode {
    margin: 30px 0 0 70px;
  }

  .intro {
    background-color: #ff7674;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .btn-div {
    margin: 120px 0 0 30px;
  }

  a {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
.price {
  font-size: 18px;
  font-weight: bold;
  color: $theme_color;
}
.head-right {
  font-weight: bold;
}
</style>
